<template>
    <div class="page-header-index-wide" :style="homeStyle">
        <a-row :gutter="24" v-show="!showCompanyDetail">
            <a-col class="colDiv" :sm="24" :md="12" :xl="6" :style="{ marginBottom: '24px',backgroundColor:'#ffffff',height:'52vh',borderRadius:'5px' }">
                <h5>园区企业情况</h5>
                <div class="body">
                    <div class="legend">
                        <div>
                            <b class="blueB"></b>
                            <span>注册与办公一致</span>
                        </div>
                        <div>
                            <b class="redB"></b>
                            <span>异地办公</span>
                        </div>
                        <div>
                            <img class="sortIcon" @click="switchSortType" :src="require('../assets/'+sortType+'.svg')">
                        </div>
                    </div>
                    <div class="yqList">
                        <li v-for="item in parkData">
                            <span :title="item.parkName" class="parkName">{{item.parkName?(item.parkName.length>9?item.parkName.substr(0,9):item.parkName):''}}</span>
                            <div class="bar" :style="{width:(item.companyNum/maxNum) * 45+'%'}">
                                <span class="barB" :title="item.addressEqualNum" :style="{width:(parseFloat(item.addressEqualNum)/item.companyNum) * 100+'%'}"></span>
                                <span class="barR" :title="item.addressUnEqualNum" :style="{width:(parseFloat(item.addressUnEqualNum)/item.companyNum) * 100+'%'}"></span>
                            </div>
                            <span>{{item.companyNum}}</span>
                        </li>
                    </div>
                    <a-pagination
                        size="small"
                        v-model="parkPageNo"
                        style="float: right;margin-top:10px;"
                        :total="total"
                        :page-size="pageSize"
                        @change="onChange"
                      >
                      </a-pagination>
                </div>
            </a-col>
            <a-col class="colDiv" :sm="24" :md="12" :xl="11" :style="{ marginBottom: '24px',backgroundColor:'#ffffff',height:'52vh',borderRadius:'5px',margin:'0px 25px' }">
                <h5>近3个月互动记录-共{{ipagination.total}}条</h5>
                <div class="body">
                    <a-table style="max-height:calc(52vh - 115px);overflow-y:auto" :bordered="false"  size="small" :columns="columns" :pagination="ipagination" :data-source="dataSource" @change="handleTableChange">
                        <span slot="oneRowName" slot-scope="text, record">
                          <span v-if="text" class="oneRowName" :title="text">{{text}}</span>
                        </span>
                        <span slot="company" slot-scope="text, record">
                          <span v-if="text" style="cursor: pointer;" @click="handleDetail(record)" class="oneRowName">{{text}}</span>
                        </span>
                        <span slot="tag" slot-scope="text, record">
                          <template v-if="text">
                            <span v-if="item" class="tagSpan" v-for="(item,index) in text.split(',')">{{item}}</span>
                          </template>
                        </span>
                    </a-table>
                </div>
            </a-col>
            <a-col class="colDiv" :sm="24" :md="12" :xl="6" :style="{ marginBottom: '24px',backgroundColor:'#ffffff',height:'52vh',borderRadius:'5px' }">
                <h5>互动周期分布</h5>
                <div class="body">
                    <div id="echarts"></div>
                </div>
            </a-col>
            <a-col class="colDiv tableFoot" :sm="24" :md="12" :xl="24" :style="{ marginBottom: '24px',backgroundColor:'#ffffff',borderRadius:'5px' }">
                <a-tabs default-active-key="1">
                  <a-tab-pane key="1" tab="查企业" style="padding-bottom:140px;">
                    <div class="table-page-search-wrapper">
                      <a-form layout="inline" @keyup.enter.native="searchQuery">
                        <a-row :gutter="24">
                          <a-col :xl="4" :lg="7" :md="8" :sm="24">
                            <a-input style="width:100%" placeholder="请输入企业信用代码或名称" v-model="queryParam.CompanyName"></a-input>
                          </a-col>
                          <a-col :xl="4" :lg="7" :md="8" :sm="24">
                            <a-select show-search :filter-option="filterOption" mode="multiple" style="width:100%" placeholder="请选择园区分类" v-model="queryParam.HighteckPark">
                                  <a-select-option value="">全部</a-select-option>
                                  <a-select-option :value="item.BaseInfoId" v-for="(item,index) in treeData">{{item.Value}}</a-select-option>
                              </a-select>
                          </a-col>
                          <a-col :xl="4" :lg="7" :md="8" :sm="24">
                            <a-select show-search :filter-option="filterOption" mode="multiple" style="width:100%" placeholder="请选择落地园区" v-model="queryParam.SubPark">
                                  <a-select-option value="">全部</a-select-option>
                                  <a-select-option :value="item.BaseHighteckParkId" v-for="(item,index) in SubParkArr">{{item.ParkName}}</a-select-option>
                              </a-select>
                            <!-- <a-tree-select
                              v-model="queryParam.SubPark"
                              tree-data-simple-mode
                              :replaceFields="replaceFields"
                              style="width: 100%"
                              :dropdown-style="{ maxHeight: '400px', overflow: 'auto' }"
                              allow-clear
                              multiple
                              :tree-data="treeData"
                              placeholder="请选择园区"
                              :load-data="onLoadData"
                            /> -->
                          </a-col>
                          <a-col :xl="4" :lg="7" :md="8" :sm="24">
                            <a-select show-search :filter-option="filterOption" style="width:100%" mode="multiple" placeholder="一级行业" v-model="queryParam.PrimaryIndustry">
                                  <a-select-option value="">全部</a-select-option>
                                  <a-select-option :value="item.BaseIndustryId" v-for="(item,index) in treeData1">{{item.Industry}}</a-select-option>
                              </a-select>
                          </a-col>
                          <a-col :xl="4" :lg="7" :md="8" :sm="24">
                            <a-select show-search :filter-option="filterOption" style="width:100%" mode="multiple" placeholder="二级行业" v-model="queryParam.Industry">
                                  <a-select-option value="">全部</a-select-option>
                                  <a-select-option :value="item.BaseIndustryId" v-for="(item,index) in SubIndustryArr">{{item.Industry}}</a-select-option>
                              </a-select>
                          </a-col>
                          <a-col :xl="4" :lg="7" :md="8" :sm="24">
                            <a-select show-search :filter-option="filterOption" mode="multiple" style="width:100%" placeholder="三级行业" v-model="queryParam.SubIndustries">
                                  <a-select-option value="">全部</a-select-option>
                                  <a-select-option :value="item.BaseIndustryId" v-for="(item,index) in SubIndustryArr">{{item.Industry}}</a-select-option>
                              </a-select>
                          </a-col>
                          <a-col :xl="4" :lg="7" :md="8" :sm="24">
                            <a-select show-search :filter-option="filterOption" mode="tags" style="width:100%" placeholder="请输入行业标签" v-model="queryParam.IndustryTag">
                                  <a-select-option value="">全部</a-select-option>
                                  <a-select-option :value="item.IndustryTag" v-for="(item,index) in industryTagArr">{{item.IndustryTag}}</a-select-option>
                              </a-select>
                          </a-col>
                          <a-col :xl="4" :lg="7" :md="8" :sm="24">
                            <a-select mode="multiple" style="width:100%" placeholder="请选择纳税规模" v-model="queryParam.TaxedSize">
                                  <a-select-option value="">全部</a-select-option>
                                  <a-select-option :value="item.BaseInfoId" v-for="(item,index) in taxedSizeArr">{{item.Value}}</a-select-option>
                              </a-select>
                          </a-col>
                          <a-col :xl="4" :lg="7" :md="8" :sm="24">
                            <a-select mode="multiple" style="width:100%" placeholder="请选择估值规模" v-model="queryParam.ValuationSize">
                                  <a-select-option value="">全部</a-select-option>
                                  <a-select-option :value="item.BaseInfoId" v-for="(item,index) in ValuationSizeArr">{{item.Value}}</a-select-option>
                              </a-select>
                          </a-col>
                          <a-col :xl="4" :lg="7" :md="8" :sm="24">
                            <a-select mode="multiple" style="width:100%" placeholder="请选择融资轮次" v-model="queryParam.RefinanceRound">
                                  <a-select-option value="">全部</a-select-option>
                                  <a-select-option :value="item.BaseInfoId" v-for="(item,index) in RefinanceRoundArr">{{item.Value}}</a-select-option>
                              </a-select>
                          </a-col>
                          <a-col :xl="4" :lg="7" :md="8" :sm="24">
                            <a-select mode="multiple" style="width:100%" placeholder="请选择人员规模" v-model="queryParam.StaffSize">
                                  <a-select-option value="">全部</a-select-option>
                                  <a-select-option :value="item.BaseInfoId" v-for="(item,index) in StaffSizeArr">{{item.Value}}</a-select-option>
                              </a-select>
                          </a-col>
                          <a-col :xl="4" :lg="7" :md="8" :sm="24">
                            <a-select mode="multiple" style="width:100%" placeholder="请选择互动时间" v-model="queryParam.InteractiveCycle">
                                  <a-select-option value="">全部</a-select-option>
                                  <a-select-option :value="item.BaseInfoId" v-for="(item,index) in InteractiveCycleArr">{{item.Value}}</a-select-option>
                              </a-select>
                          </a-col>
                          <a-col :xl="4" :lg="7" :md="8" :sm="24">
                            <a-select mode="multiple" style="width:100%" placeholder="请选择企业需求" v-model="queryParam.DemandTag">
                                  <a-select-option value="">全部</a-select-option>
                                  <a-select-option :value="item.Value" v-for="(item,index) in DemandTagArr">{{item.Value}}</a-select-option>
                              </a-select>
                          </a-col>
                          <a-col :xl="4" :lg="7" :md="8" :sm="24">
                            <a-select mode="multiple" style="width:100%" placeholder="办公与注册是否一致" v-model="queryParam.IsregoffSame">
                                  <a-select-option value="">全部</a-select-option>
                                  <a-select-option :value="item.BaseInfoId" v-for="(item,index) in selectData1">{{item.Value}}</a-select-option>
                              </a-select>
                          </a-col>
                          <a-col :xl="4" :lg="7" :md="8" :sm="24">
                            <a-select mode="multiple" style="width:100%" placeholder="成立年限" v-model="queryParam.RegisteredPeriod">
                                  <a-select-option value="">全部</a-select-option>
                                  <a-select-option :value="item.BaseInfoId" v-for="(item,index) in RegisteredPeriodArr">{{item.Value}}</a-select-option>
                              </a-select>
                          </a-col>
                          <a-col :xl="4" :lg="7" :md="8" :sm="24">
                            <a-select mode="multiple" style="width:100%" placeholder="Linker-互动" v-model="queryParam.Linker">
                                  <a-select-option value="">全部</a-select-option>
                                  <a-select-option :value="item.Name" v-for="(item,index) in LinkerArr">{{item.Name}}</a-select-option>
                              </a-select>
                          </a-col>
                          <a-col :xl="4" :lg="7" :md="8" :sm="24">
                            <span style="float: left;overflow: hidden;" class="table-page-search-submitButtons">
                              <a-button type="primary" @click="searchQuery" icon="search">查询</a-button>
                              <a-button type="primary" @click="searchReset" icon="reload" style="margin-left: 8px">重置</a-button>
                            </span>
                          </a-col>

                        </a-row>
                      </a-form>
                      <div>
                        <span style="margin-bottom:10px;display: block;">查询结果：<a>{{epagination.total}}家</a></span>
                        <a-table
                          ref="table"
                          size="small"
                          bordered
                          rowKey="id"
                          :columns="companyColumns"
                          :dataSource="companyData"
                          :pagination="epagination"
                          :loading="loadingComp"
                          class="j-table-force-nowrap"
                          @change="handleTableChange1">
                          <span slot="oneRowName" slot-scope="text, record">
                            <span v-if="text" class="oneRowName" :title="text">{{text}}</span>
                          </span>
                          <span slot="tag" slot-scope="text, record">
                            <template v-if="text">
                              <span class="tagSpan" v-for="(item,index) in text.split(',')">{{item}}</span>
                            </template>
                          </span>
                          <span slot="action" slot-scope="text, record">
                            <a @click="handleDetail(record)">详情</a>
                          </span>

                        </a-table>
                      </div>
                    </div>
                  </a-tab-pane>
                  <a-tab-pane key="2" tab="找人员"  style="padding-bottom:140px;">
                    <div class="table-page-search-wrapper">
                      <a-form layout="inline" @keyup.enter.native="searchQuery1">
                        <a-row :gutter="24">
                          <a-col :xl="4" :lg="7" :md="8" :sm="24">
                            <a-input style="width:100%" placeholder="请输入姓名" v-model="queryParam1.PersonalInfo_PersonalName"></a-input>
                          </a-col>
                          <a-col :xl="4" :lg="7" :md="8" :sm="24">
                            <a-input style="width:100%" placeholder="请输入手机号" v-model="queryParam1.PersonalInfo_Phone"></a-input>
                          </a-col>
                          <a-col :xl="4" :lg="7" :md="8" :sm="24">
                            <a-select show-search :filter-option="filterOption" @change="getCity" style="width:100%" placeholder="请选择籍贯（省）" v-model="queryParam1.PersonalInfo_Province">
                                  <a-select-option value="">全部</a-select-option>
                                  <a-select-option :value="item.RegionId" v-for="(item,index) in provinceData">{{item.RegionName}}</a-select-option>
                              </a-select>
                          </a-col>
                          <a-col :xl="4" :lg="7" :md="8" :sm="24">
                            <a-select show-search :filter-option="filterOption" @change="$forceUpdate()" style="width:100%" placeholder="请选择籍贯（市）" v-model="queryParam1.PersonalInfo_City">
                                  <a-select-option value="">全部</a-select-option>
                                  <a-select-option :value="item.RegionId" v-for="(item,index) in cityData">{{item.RegionName}}</a-select-option>
                              </a-select>
                          </a-col>
                          <a-col :xl="4" :lg="7" :md="8" :sm="24">
                            <a-select mode="multiple" style="width:100%" placeholder="请选择性别" v-model="queryParam1.PersonalInfo_Gender">
                                  <a-select-option value="">全部</a-select-option>
                                  <a-select-option :value="item.BaseInfoId" v-for="(item,index) in SexTypeArr">{{item.Value}}</a-select-option>
                              </a-select>
                          </a-col>
                          <a-col :xl="4" :lg="7" :md="8" :sm="24">
                            <a-select show-search :filter-option="filterOption" mode="multiple" style="width:100%" placeholder="请选择毕业学校" v-model="queryParam1.PersonalInfo_SchoolDegree">
                                  <a-select-option value="">全部</a-select-option>
                                  <a-select-option :value="item.Value" v-for="(item,index) in SchoolDegreeArr">{{item.Value}}</a-select-option>
                              </a-select>
                          </a-col>
                          <a-col :xl="4" :lg="7" :md="8" :sm="24">
                            <a-select show-search :filter-option="filterOption" mode="multiple" style="width:100%" placeholder="请选择职务标签" v-model="queryParam1.PositionTagId">
                                  <a-select-option value="">全部</a-select-option>
                                  <a-select-option :value="item.Value" v-for="(item,index) in PositionTagArr">{{item.Value}}</a-select-option>
                              </a-select>
                          </a-col>
                          <a-col :xl="4" :lg="7" :md="8" :sm="24">
                            <a-select show-search :filter-option="filterOption" mode="multiple" style="width:100%" placeholder="请选择职业标签" v-model="queryParam1.PersonalInfo_JobProfessional">
                                  <a-select-option value="">全部</a-select-option>
                                  <a-select-option :value="item.Value" v-for="(item,index) in JobProfessionalArr">{{item.Value}}</a-select-option>
                              </a-select>
                          </a-col>
                          <a-col :xl="4" :lg="7" :md="8" :sm="24">
                            <a-select show-search :filter-option="filterOption" mode="multiple" style="width:100%" placeholder="请选择个人标签" v-model="queryParam1.PersonalInfo_PersonalHonor">
                                  <a-select-option value="">全部</a-select-option>
                                  <a-select-option :value="item.Value" v-for="(item,index) in PersonalHonorArr">{{item.Value}}</a-select-option>
                              </a-select>
                          </a-col>
                          <a-col :xl="4" :lg="7" :md="8" :sm="24">
                            <a-select mode="multiple" style="width:100%" placeholder="请选择年龄段" v-model="queryParam1.PersonalInfo_AgeGroup">
                                  <a-select-option value="">全部</a-select-option>
                                  <a-select-option :value="item.BaseInfoId" v-for="(item,index) in AgeGroupArr">{{item.Value}}</a-select-option>
                              </a-select>
                          </a-col>
                          
                          <a-col :xl="4" :lg="7" :md="8" :sm="24">
                            <span style="float: left;overflow: hidden;" class="table-page-search-submitButtons">
                              <a-button type="primary" @click="searchQuery1" icon="search">查询</a-button>
                              <a-button type="primary" @click="searchReset1" icon="reload" style="margin-left: 8px">重置</a-button>
                            </span>
                          </a-col>

                        </a-row>
                      </a-form>
                      <div>
                        <span style="margin-bottom:10px;display:block;">查询结果：<a>{{qpagination.total}}人</a></span>
                        <a-table
                          ref="table"
                          size="small"
                          bordered
                          rowKey="id"
                          :columns="personColumns"
                          :dataSource="personData"
                          :pagination="qpagination"
                          class="j-table-force-nowrap"
                          @change="handleTableChange2">
                          <span slot="oneRowName" slot-scope="text, record">
                            <span v-if="text" class="oneRowName" :title="text">{{text}}</span>
                          </span>
                          <span slot="tag" slot-scope="text, record">
                            <template v-if="text">
                              <span class="tagSpan" v-for="(item,index) in text.split(',')">{{item}}</span>
                            </template>
                          </span>

                        </a-table>
                      </div>
                    </div>
                  </a-tab-pane>
                </a-tabs>

            </a-col>
        </a-row>
        <div v-if="showCompanyDetail" style="background-color: #ffffff;padding-top:10px;">
          <div>
            <!-- <a-button type="primary" style="margin-left:10px" @click="showCompanyDetail = false">
              
            </a-button> -->
            <span style="margin-left:10px;cursor: pointer;color: #1890FF" @click="showCompanyDetail = false"><a-icon type="left" />返回</span>
            
          </div>
          <companyListDetail :companyId="companyId" ref="company"></companyListDetail>
        </div>
        <commonModal
          modalTitle="公司选择"
          ref="commonModal"
          @getCommonModalData="commonModalData"
          :columns="tableColumns"
          apiUrl="/companyInfo/queryRows"
          :searchArr="searchArr"></commonModal>
    </div>
</template>

<script>
  import commonModal from '@/components/commonModal'
  import companyListDetail from './companyListDetail'
    export default {
        name: 'home',
        components:{
          commonModal,companyListDetail
        },
        props: {
          homeStyle: {
            type: Object,
            default: () => {
              return {}
            }
          }
        },
        data(){
            return{
              loadingComp:false,
              cityData:[],
              SubParkArr:[],
              RegisteredPeriodArr:[],
              companyId:'',
              showCompanyDetail:false,
              SchoolDegreeArr:[],
              PositionTagArr:[],
              JobProfessionalArr:[],
              PersonalHonorArr:[],
              AgeGroupArr:[],
              SexTypeArr:[],
              queryParam1:{},
              StaffSizeArr:[],
              personColumns:[{
            title: '姓名',
            align:"center",
            dataIndex: 'PersonalInfo_PersonalName',
            isKey:true
           },
       {
            title: '性别',
            align:"center",
            dataIndex: 'PersonalInfo_Gender_Value'
           },
           {
            title: '年龄段',
            align:"center",
            dataIndex: 'PersonalInfo_AgeGroup_Value'
           },
           {
            title: '手机',
            align:"center",
            dataIndex: 'PersonalInfo_Phone',
            isKey:true
           },
            {
            title: '微信号',
            align:"center",
            dataIndex: 'PersonalInfo_Wechat',
           },
       {
            title: '当前公司',
            align:"center",
            dataIndex: 'Company_CompanyName',
           },
            {
            title: '职务',
            align:"center",
            dataIndex: 'Position',
           },
           {
            title: '职务标签',
            align:"center",
            dataIndex: 'PositionTagId',
            scopedSlots: { customRender: 'tag' },
           },
       
       {
            title: '毕业院校',
            align:"center",
            dataIndex: 'PersonalInfo_SchoolDegree',
            scopedSlots: { customRender: 'tag' },
           },
       {
            title: '职业标签',
            align:"center",
            dataIndex: 'PersonalInfo_JobProfessional',
            scopedSlots: { customRender: 'tag' },
           },
           {
            title: '个人标签',
            align:"center",
            dataIndex: 'PersonalInfo_PersonalHonor',
            scopedSlots: { customRender: 'tag' },
           },
           {
            title: '个人爱好',
            align:"center",
            dataIndex: 'PersonalInfo_PersonalHobbies'
           },
           {
            title: '互动标签',
            align:"center",
            dataIndex: 'PersonalInfo_InteractiveTag',
            scopedSlots: { customRender: 'tag' },
           },
           {
            title: 'Linker',
            align:"center",
            dataIndex: 'PersonalInfo_Linker_Name'
           },
           
              ],
              SubIndustryArr:[],
              personData:[],
              companyData:[],
              companyColumns: [
             {
                  title: '统一信用代码',
                  align:"center",
                  dataIndex: 'CompanyCode',
                 },
             {
                  title: '公司简称',
                  align:"center",
                  dataIndex: 'CompanyAbbr',
                 },
                 // {
                 //  title: '所属园区',
                 //  align:"center",
                 //  dataIndex: 'HighteckPark_ParkName'
                 // },
                 {
                  title: '落地园区',
                  align:"center",
                  dataIndex: 'SubPark_ParkName'
                 },
                 // {
                 //  title: '法人',
                 //  align:"center",
                 //  dataIndex: 'LegalPerson'
                 // },
                 {
                  title: '成立年限',
                  align:"center",
                  dataIndex: 'RegisteredPeriod_Value',
                  defaultSortOrder: 'descend',
                  sorter: (a, b) => a.RegisteredPeriod_Value - b.RegisteredPeriod_Value,
                  
                 },
             //     {
             //      title: '经营状态',
             //      align:"center",
             //      dataIndex: 'OperationStatus_Value'
             //     },
             //     {
             //      title: '注册资本',
             //      align:"center",
             //      dataIndex: 'RegisteredAmt',
             //      customRender:function (t,r,index) {
             //        return t?t+'万':'';
             //      }
             //     },
             //     {
             //      title: '注册币种',
             //      align:"center",
             //      dataIndex: 'CurrencyType_Value'
             //     },
             //     {
             //      title: '行业',
             //      align:"center",
             //      dataIndex: 'Industry_Industry'
             //     },
             //     {
             //      title: '子行业',
             //      align:"center",
             //      dataIndex: 'SubIndustries',
             //      scopedSlots: { customRender: 'tag' },
             //     },
             // {
             //      title: '行业标签',
             //      align:"center",
             //      dataIndex: 'IndustryTag',
             //      scopedSlots: { customRender: 'tag' },
             //     },
             // {
             //      title: '一句话简介',
             //      align:"center",
             //      dataIndex: 'CompanyBrief',
             //      scopedSlots: { customRender: 'oneRowName' },
             //     },
             //     {
             //      title: '公司介绍',
             //      align:"center",
             //      dataIndex: 'CompanyDepiction',
             //      scopedSlots: { customRender: 'oneRowName' },
             //     },
             
             
             // {
           //        title: '实缴资本',
           //        align:"center",
           //        dataIndex: 'paidinamt'
           //       },
             // {
           //        title: '经营范围',
           //        align:"center",
           //        dataIndex: 'businessscope'
           //       },
             
             
             // {
           //        title: '所在城市',
           //        align:"center",
           //        dataIndex: 'cityid'
           //       },
             // {
           //        title: '注册区/县',
           //        align:"center",
           //        dataIndex: 'registereddistrictid'
           //       },
             // {
           //        title: '注册详细地址',
           //        align:"center",
           //        dataIndex: 'registeredaddress'
           //       },
             // {
           //        title: '办公区/县',
           //        align:"center",
           //        dataIndex: 'officedistrictid'
           //       },
             // {
           //        title: '办公详细地址',
           //        align:"center",
           //        dataIndex: 'officeaddress'
           //       },
             
             // {
           //        title: '是否高新企业',
           //        align:"center",
           //        dataIndex: 'ishigtech'
           //       },
            
             // {
           //        title: '团队标签',
           //        align:"center",
           //        dataIndex: 'teamtag'
           //       },
             // {
           //        title: '团队描述',
           //        align:"center",
           //        dataIndex: 'teamremark'
           //       },
             {
                  title: '人员规模',
                  align:"center",
                  sorter: (a, b) => a.StaffSize_Value - b.StaffSize_Value,
                  dataIndex: 'StaffSize_Value'
                 },
                 {
                  title: '办公与注册是否一致',
                  align:"center",
                  sorter: (a, b) => a.IsregoffSame - b.IsregoffSame,
                  dataIndex: 'IsregoffSame',
                  customRender:function (t,r,index) {
                    return t == 1?'是':t == 0?'否':t;
                  }
                 },
             {
                  title: '纳税规模',
                  align:"center",
                  sorter: (a, b) => a.TaxedSize_Value - b.TaxedSize_Value,
                  dataIndex: 'TaxedSize_Value'
                 },
             // {
           //        title: '估值规模',
           //        align:"center",
           //        dataIndex: 'valuationsizeid'
           //       },
             {
                  title: '融资轮次',
                  align:"center",
                  sorter: (a, b) => a.RefinanceRound_Value - b.RefinanceRound_Value,
                  dataIndex: 'RefinanceRound_Value'
                 },
             {
                  title: '互动时间',
                  align:"center",
                  sorter: (a, b) => a.InteractiveCycle_Value - b.InteractiveCycle_Value,
                  dataIndex: 'InteractiveCycle_Value'
                 },
             // {
           //        title: '服务状态',
           //        align:"center",
           //        dataIndex: 'servicestatusid'
           //       },
             // {
           //        title: 'Linker',
           //        align:"center",
           //        dataIndex: 'linkerid'
           //       },
             // {
           //        title: '最近更新人',
           //        align:"center",
           //        dataIndex: 'updatebyid'
           //       },
             // {
           //        title: '最近更新日期',
           //        align:"center",
           //        dataIndex: 'ts'
           //       },
             // {
           //        title: '状态',
           //        align:"center",
           //        dataIndex: 'datastatus'
           //       },
             // {
           //        title: '互动标签',
           //        align:"center",
           //        dataIndex: 'interactivetag'
           //       },
           {
                  title: '行业标签',
                  align:"center",
                  dataIndex: 'IndustryTag',
                  scopedSlots: { customRender: 'tag' },
                 },
                 {
                  title: '需求标签',
                  align:"center",
                  dataIndex: 'DemandTag',
                  scopedSlots: { customRender: 'tag' },
                 },
                {
                  title: '操作',
                  dataIndex: '',
                  align:"center",
                  scopedSlots: { customRender: 'action' },
                }
              ],
              LinkerArr:[],
              selectData1:[{
                BaseInfoId:'1',
                Value:'是'
              },{
                BaseInfoId:'0',
                Value:'否'
              }],
              selectData2:[{
                BaseInfoId:'1',
                Value:'有'
              },{
                BaseInfoId:'2',
                Value:'无'
              }],
              selectData3:[{
                BaseInfoId:'1',
                Value:'1到5年'
              },{
                BaseInfoId:'2',
                Value:'5到10年'
              }],
              DemandTagArr:[],
              InteractiveCycleArr:[],
              StaffSize:[],
              RefinanceRoundArr:[],
              ValuationSizeArr:[],
              taxedSizeArr:[],
                industryTagArr:[],
                replaceFields:{children:'children', title:'Value', value: 'id' },
                treeData:[],
                replaceFields1:{children:'children', title:'Industry', value: 'id' },
                treeData1:[],
                tableColumns:[
                  { title: '公司名称', dataIndex: 'CompanyName' },
                  { title: '公司编码', dataIndex: 'CompanyCode' },
                ],
                searchArr:[
                  { label: '公司名称', key: 'CompanyName' },
                  { label: '公司编码', key: 'CompanyCode' },
                ],
                queryParam:{},
                pageSize:10,
                total: 0,
                sortType:'desc',
                parkDataAll:[],
                parkData:[],
                parkPageNo:1,
                maxNum:0,
                columns: [
                  
                   {
                    title: '企业简称',
                    align:"center",
                    dataIndex: 'Company_CompanyAbbr',
                    scopedSlots: { customRender: 'company' },
                    isKey:true
                   },
                   {
                    title: '所属园区',
                    dataIndex: 'Company_HighteckPark_Value',
                    align:"center",
                   },
                   {
                    title: 'Linker',
                    align:"center",
                    dataIndex: 'Linker',
                    sorter: (a, b) => a.Linker - b.Linker,
                    scopedSlots: { customRender: 'tag' },
                   },
                   {
                    title: '互动时间',
                    align:"center",
                    dataIndex: 'VisitTime',
                    defaultSortOrder: 'descend',
                    sorter: (a, b) => a.VisitTime - b.VisitTime,
                    customRender:function (t,r,index) {
                      return t?t.split(' ')[0]:'';
                    }
                   },
                   {
                    title: '互动内容',
                    align:"center",
                    dataIndex: 'DemandDetail',
                    scopedSlots: { customRender: 'oneRowName' },
                   },
                ],
                isorter:{
                    column: 'VisitTime',
                    order: 'desc',
                },
                isortercompany:{
                    column: 'RegisteredDate',
                    order: 'asc',
                },
                isorterperson:{
                    column: 'Ts',
                    order: 'desc',
                },
                dataSource:[],
                ipagination:{
                    current: 1,
                    pageSize: 10,
                    pageSizeOptions: ['10', '20', '30'],
                    showTotal: (total, range) => {
                        return range[0] + "-" + range[1] + " 共" + total + "条"
                    },
                    showQuickJumper: true,
                    showSizeChanger: true,
                    total: 0
                },
                epagination:{
                    current: 1,
                    pageSize: 10,
                    pageSizeOptions: ['10', '20', '30'],
                    showTotal: (total, range) => {
                        return range[0] + "-" + range[1] + " 共" + total + "条"
                    },
                    showQuickJumper: true,
                    showSizeChanger: true,
                    total: 0
                },
                qpagination:{
                    current: 1,
                    pageSize: 10,
                    pageSizeOptions: ['10', '20', '30'],
                    showTotal: (total, range) => {
                        return range[0] + "-" + range[1] + " 共" + total + "条"
                    },
                    showQuickJumper: true,
                    showSizeChanger: true,
                    total: 0
                },
                provinceData:[],
                treeData2: [],
                url:{
                  baseList:"/baseInfo/queryRows",
                }
            }
        },
        mounted(){
            this.getParkCompany();
            this.loadData();
            this.loadCompanyData();
            this.loadPersonData();
            this.getSearchData();
            this.getReport();
        },
        methods:{
          getSubIndustry(){
            this.$nextTick(()=>{
              this.queryParam.SubIndustries = '';
              this.$http.postAction('/baseIndustry/queryRows',{pageNo:1,pageSize:9999,selectFields:[],conditions:[{
                  "field":"UpIndustry",
                  "operator":"=",
                  "value":this.queryParam.IndustryId
                }]}).then((res)=>{
                if(res.status == 1){
                  this.SubIndustries = res.data.rows;
                }
              })
            })
          },
          getErjiIndustry(){
            this.$nextTick(()=>{
              this.queryParam.IndustryId = '';
              this.queryParam.SubIndustries = '';
              this.$http.postAction('/baseIndustry/queryRows',{pageNo:1,pageSize:9999,selectFields:[],conditions:[{
                  "field":"UpIndustry",
                  "operator":"=",
                  "value":this.queryParam.PrimaryIndustryId
                }]}).then((res)=>{
                if(res.status == 1){
                  this.treeData2 = res.data.rows;
                }
              })
            })
          },
            getCity(type){
              this.$nextTick(()=>{
                this.queryParam1.PersonalInfo_City = '';
                this.cityData = [];
                let provinceid = this.queryParam1.PersonalInfo_Province;
                if(!provinceid){
                  return
                }
                this.$http.postAction("/baseRegion/queryRows",{pageIndex:1,pageSize:9999,selectFields:[],conditions:[{
                    "field":"Parent",
                    "operator":"=",
                    "value":provinceid
                  }]}).then(res=>{
                  if(res.status == 1){
                    this.cityData = res.data.rows;
                  }
                })
              })
            },
            filterOption(input, option) {
              return (
                option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
              );
            },
            handleDetail(record){
              this.companyId = record.CompanyId?record.CompanyId:record.Company;
              this.showCompanyDetail = true;
            },
            searchQuery() {
            this.loadCompanyData(1);
            },
            searchReset() {
                this.queryParam = {}
                this.loadCompanyData(1);
            },
            searchQuery1() {
              this.loadPersonData(1);
            },
            searchReset1() {
              this.queryParam1 = {}
              this.loadPersonData(1);
            },
            onLoadData(treeNode) {
              let id = treeNode.value;
              this.$http.postAction('/baseHighteckPark/queryRows',{pageNo:1,pageSize:10000,selectFields:[],conditions:[{
                  "field":"ParkType",
                  "operator":"=",
                  "value":id
                }]}).then((res)=>{
                  if(res.status == 1){
                    let data = res.data.rows;
                    data.map(e=>{
                      e.id = e.BaseHighteckParkId;
                      e.Value = e.ParkName;
                      e.isLeaf = true;
                    })
                    this.treeData = this.treeData.map(e=>{
                      if(e.id == id){
                        e.children = data;
                      }
                      return e;
                    })
                    console.log('this.treeData1111',this.treeData)
                  }
                })
            },
            getSearchData(){
              this.$http.postAction('/baseHighteckPark/queryRows',{pageNo:1,pageSize:10000,selectFields:[]}).then((res)=>{
                  if(res.status == 1){
                    this.SubParkArr = res.data.rows;
                  }
                })
              this.$http.postAction("/baseRegion/queryRows",{pageIndex:1,pageSize:9999,selectFields:[],conditions:[{
                    "field":"RegionType",
                    "operator":"=",
                    "value":1
                  }]}).then(res=>{
                if(res.status == 1){
                  this.provinceData = res.data.rows;
                }
              })
              this.$http.postAction(this.url.baseList,{pageNo:1,pageSize:1000,selectFields:[],conditions:[{
                  "field":"TypeCode",
                  "operator":"=",
                  "value":'RegisteredPeriod'
                }]}).then((res)=>{
                if(res.status == 1){
                  this.RegisteredPeriodArr = res.data.rows;
                }
              })
              this.$http.postAction(this.url.baseList,{pageNo:1,pageSize:1000,selectFields:[],conditions:[{
                  "field":"TypeCode",
                  "operator":"=",
                  "value":'SexType'
                }]}).then((res)=>{
                if(res.status == 1){
                  this.SexTypeArr = res.data.rows;
                }
              })
              this.$http.postAction(this.url.baseList,{pageNo:1,pageSize:1000,selectFields:[],conditions:[{
                  "field":"TypeCode",
                  "operator":"=",
                  "value":'SchoolDegree'
                }]}).then((res)=>{
                if(res.status == 1){
                  this.SchoolDegreeArr = res.data.rows;
                }
              })
              this.$http.postAction(this.url.baseList,{pageNo:1,pageSize:1000,selectFields:[],conditions:[{
                  "field":"TypeCode",
                  "operator":"=",
                  "value":'PositionTag'
                }]}).then((res)=>{
                if(res.status == 1){
                  this.PositionTagArr = res.data.rows;
                }
              })
              this.$http.postAction(this.url.baseList,{pageNo:1,pageSize:1000,selectFields:[],conditions:[{
                  "field":"TypeCode",
                  "operator":"=",
                  "value":'JobProfessional'
                }]}).then((res)=>{
                if(res.status == 1){
                  this.JobProfessionalArr = res.data.rows;
                }
              })
              this.$http.postAction(this.url.baseList,{pageNo:1,pageSize:1000,selectFields:[],conditions:[{
                  "field":"TypeCode",
                  "operator":"=",
                  "value":'PersonalHonor'
                }]}).then((res)=>{
                if(res.status == 1){
                  this.PersonalHonorArr = res.data.rows;
                }
              })
              this.$http.postAction(this.url.baseList,{pageNo:1,pageSize:1000,selectFields:[],conditions:[{
                  "field":"TypeCode",
                  "operator":"=",
                  "value":'AgeGroup'
                }]}).then((res)=>{
                if(res.status == 1){
                  this.AgeGroupArr = res.data.rows;
                }
              })
              this.$http.postAction(this.url.baseList,{pageNo:1,pageSize:1000,selectFields:[],conditions:[{
                  "field":"TypeCode",
                  "operator":"=",
                  "value":'ParkType'
                }]}).then((res)=>{
                if(res.status == 1){
                  this.treeData = res.data.rows;
                  this.treeData.map(e=>{
                    e.id = e.BaseInfoId;
                    e.selectable = false;
                    e.children = [];
                  })
                }
                console.log('this.treeData',this.treeData)
              })
              this.$http.postAction('/baseIndustry/queryRows',{pageNo:1,pageSize:10000,selectFields:[]}).then((res)=>{
                if(res.status == 1){
                  let arr = res.data.rows;
                  // this.treeData1.push(e);
                  arr.forEach(e=>{
                    if(e.UpIndustry){
                      //子行业
                      this.SubIndustryArr.push(e);
                    }else{
                      this.treeData1.push(e);
                    }
                  })
                  
                  // arr.map(e=>{
                  //   e.id = e.BaseIndustryId;
                  //   if(!e.UpIndustry){
                  //     e.children = [];
                  //     this.treeData1.push(e);
                  //   }
                  // })
                  // arr.map(e=>{
                  //   e.id = e.BaseIndustryId;
                  //   if(e.UpIndustry){
                  //     this.treeData1.map(item=>{
                  //       if(item.id == e.UpIndustry){
                  //         item.children.push(e);
                  //       }
                  //     });
                  //   }
                  // })
                }
              })
              this.$http.postAction('/baseIndustryTag/queryRows',{pageNo:1,pageSize:10000,selectFields:[]}).then((res)=>{
                if(res.status == 1){
                  this.industryTagArr = res.data.rows;
                }
              })
              this.$http.postAction(this.url.baseList,{pageNo:1,pageSize:1000,selectFields:[],conditions:[{
                  "field":"TypeCode",
                  "operator":"=",
                  "value":'TaxedSize'
                }]}).then((res)=>{
                if(res.status == 1){
                  this.taxedSizeArr = res.data.rows;
                }
              })
              this.$http.postAction(this.url.baseList,{pageNo:1,pageSize:1000,selectFields:[],conditions:[{
                  "field":"TypeCode",
                  "operator":"=",
                  "value":'ValuationSize'
                }]}).then((res)=>{
                if(res.status == 1){
                  this.ValuationSizeArr = res.data.rows;
                }
              })
              this.$http.postAction(this.url.baseList,{pageNo:1,pageSize:1000,selectFields:[],conditions:[{
                  "field":"TypeCode",
                  "operator":"=",
                  "value":'RefinanceRound'
                }]}).then((res)=>{
                if(res.status == 1){
                  this.RefinanceRoundArr = res.data.rows;
                }
              })
              this.$http.postAction(this.url.baseList,{pageNo:1,pageSize:1000,selectFields:[],conditions:[{
                  "field":"TypeCode",
                  "operator":"=",
                  "value":'StaffSize'
                }]}).then((res)=>{
                if(res.status == 1){
                  this.StaffSizeArr = res.data.rows;
                }
              })
              this.$http.postAction(this.url.baseList,{pageNo:1,pageSize:1000,selectFields:[],conditions:[{
                  "field":"TypeCode",
                  "operator":"=",
                  "value":'InteractiveCycle'
                }]}).then((res)=>{
                if(res.status == 1){
                  this.InteractiveCycleArr = res.data.rows;
                }
              })
              this.$http.postAction(this.url.baseList,{pageNo:1,pageSize:1000,selectFields:[],conditions:[{
                  "field":"TypeCode",
                  "operator":"=",
                  "value":'DemandTag'
                }]}).then((res)=>{
                if(res.status == 1){
                  this.DemandTagArr = res.data.rows;
                }
              })
              this.$http.postAction('/user/queryRows',{pageNo:1,pageSize:1000,selectFields:[],conditions:[{
              "field":"WorkStatus",
              "operator":"=",
              "value":'78'
            }]}).then((res)=>{
                if(res.status == 1){
                  this.LinkerArr = res.data.rows;
                }
              })
            },
            showCommonModal () {
              this.$refs.commonModal.open()
            },
            commonModalData(val){
              if(val.length>0){
                this.queryParam.CompanyName = val[0].CompanyName;
              }else{
                this.queryParam.CompanyName = '';
              }
              this.$forceUpdate();
            },
            handleTableChange(pagination, filters, sorter) {
                //分页、排序、筛选变化时触发
                //TODO 筛选
                if (Object.keys(sorter).length > 0) {
                    this.isorter.column = sorter.field;
                    this.isorter.order = "ascend" == sorter.order ? "asc" : "desc"
                }
                this.ipagination = pagination;
                this.loadData();
            },
            add0(m){
              return m < 10 ? '0' + m: m
            },
            formatTime(timestamp){
              var time = new Date(timestamp)    //先将时间戳转为Date对象，然后才能使用Date的方法
              var year = time.getFullYear(),
                  month = time.getMonth() + 1 ,  //月份是从0开始的
                  day = time.getDate(),
                  hour = time.getHours(),
                  minute = time.getMinutes(),
                  second = time.getSeconds()
                  //add0()方法在后面定义
              return  year+'-'+this.add0(month)+'-'+ this.add0(day)+' '+this.add0(hour)+':'+this.add0(minute) +':'+this.add0(second)
            },
            handleTableChange1(pagination, filters, sorter) {
                //分页、排序、筛选变化时触发
                //TODO 筛选
                if (Object.keys(sorter).length > 0) {
                    this.isortercompany.column = sorter.field;
                    this.isortercompany.order = "ascend" == sorter.order ? "asc" : "desc"
                }
                this.epagination = pagination;
                this.loadCompanyData();
            },
            handleTableChange2(pagination, filters, sorter) {
                //分页、排序、筛选变化时触发
                //TODO 筛选
                if (Object.keys(sorter).length > 0) {
                    this.isorterperson.column = sorter.field;
                    this.isorterperson.order = "ascend" == sorter.order ? "asc" : "desc"
                }
                this.qpagination = pagination;
                this.loadPersonData();
            },
            loadCompanyData(org){
              let param = {PageIndex:this.epagination.current,pageSize:this.epagination.pageSize,conditions:[]};
              this.loadingComp = true;
              if(org == 1){
                //加入条件

                for(let key in this.queryParam){
                  if(this.queryParam[key] && 0 < this.queryParam[key].length){
                    if(key == 'SubIndustries'){
                      if(this.queryParam[key] instanceof Array){
                        let arr = [];
                        this.queryParam[key].forEach(e=>{
                          arr.push({
                            "field":'SubIndustries.SubIndustry',
                            "operator":"like",
                            "value":e
                          })
                        })
                        param.conditions.push({
                          logicRelation:"OR",
                          children:arr
                        })
                      }else{
                        param.conditions.push({
                          "field":'SubIndustries.SubIndustry',
                          "operator":"like",
                          "value":this.queryParam[key]
                        })
                      }
                    }else if(key == 'CompanyName'){
                      param.conditions.push({
                        logicRelation:"OR",
                        children:[{
                          "field":'CompanyName',
                          "operator":"like",
                          "value":this.queryParam[key]
                        },{
                          "field":'CompanyCode',
                          "operator":"like",
                          "value":this.queryParam[key]
                        },{
                          "field":'CompanyAbbr',
                          "operator":"like",
                          "value":this.queryParam[key]
                        }]
                        
                      })
                    }else{
                      if(this.queryParam[key] instanceof Array){
                        let arr = [];
                        this.queryParam[key].forEach(e=>{
                          arr.push({
                            "field":key,
                            "operator":"like",
                            "value":e
                          })
                        })
                        param.conditions.push({
                          logicRelation:"OR",
                          children:arr
                        })
                      }else{
                        param.conditions.push({
                          "field":key,
                          "operator":"like",
                          "value":this.queryParam[key]
                        })
                      }
                      
                    }
                    
                  }
                }
              }
              param.orders = [{field: this.isortercompany.column,desc: this.isortercompany.order == 'desc'?true:false}]
              this.$http.postAction('/companyInfo/queryRows',param).then(res=>{
                this.loadingComp = false;
                    if (res.status == 1) {
                        this.companyData = res.data.rows;
                        this.epagination.total = res.data.totalCount;
                    }else{
                        this.$message.warning(res.message)
                    }
                })
            },
            loadPersonData(org){
              let param = {PageIndex:this.qpagination.current,pageSize:this.qpagination.pageSize,conditions:[]};
              if(org == 1){
                //加入条件
                for(let key in this.queryParam1){
                  if(this.queryParam1[key] && 0 < this.queryParam1[key].length){
                    if(this.queryParam1[key] instanceof Array){
                      let arr = [];
                      this.queryParam1[key].forEach(e=>{
                        arr.push({
                          "field":key,
                          "operator":"like",
                          "value":e
                        })
                      })
                      param.conditions.push({
                        logicRelation:"OR",
                        children:arr
                      })
                    }else{
                      param.conditions.push({
                        "field":key,
                        "operator":"like",
                        "value":this.queryParam1[key]
                      })
                    }
                  }
                  
                }
              }
              param.orders = [{field: this.isorterperson.column,desc: this.isorterperson.order == 'desc'?true:false}]
              this.$http.postAction('/companyStaff/queryRows',param).then(res=>{
                    if (res.status == 1) {
                        this.personData = res.data.rows;
                        this.qpagination.total = res.data.totalCount;
                    }else{
                        this.$message.warning(res.message)
                    }
                })
            },
            loadData(){
                let threeMonthAgo = this.formatTime(Date.parse(new Date()) - (90 * 24 * 60 * 60 * 1000))
                let param = {PageIndex:this.ipagination.current,pageSize:this.ipagination.pageSize,conditions:[{
                  "field":"Ts",
                  "operator":">",
                  "value":threeMonthAgo
                }]};
                param.orders = [{field: this.isorter.column,desc: this.isorter.order == 'desc'?true:false}]
                this.$http.postAction('/companyVisit/queryRows',param).then(res=>{
                    if (res.status == 1) {
                        this.dataSource = res.data.rows;
                        this.ipagination.total = res.data.totalCount;
                    }else{
                        this.$message.warning(res.message)
                    }
                })
            },
            getReport(){
                let param = {};
                this.$http.postAction('/companyInfo/report/getVisitTimeInterval',param).then(res=>{
                    if (res.status == 1 && res.data && 0 < res.data.length) {
                        this.setReport(res.data[0])
                    }else{
                        this.$message.warning(res.message)
                    }
                })
            },
            setReport(data){
                let myChart = this.$echarts.init(document.getElementById("echarts"));
                let totalArr = [0];
                let dataArr = [];
                totalArr.push(totalArr[totalArr.length-1]+parseFloat(data['lessOneMonth']));
                totalArr.push(totalArr[totalArr.length-1]+parseFloat(data['lessThreeMonth']));
                totalArr.push(totalArr[totalArr.length-1]+parseFloat(data['lessSixMonth']));
                totalArr.push(totalArr[totalArr.length-1]+parseFloat(data['lessTwelveMonth']));
                totalArr.push(totalArr[totalArr.length-1]+parseFloat(data['greaterTwelveMonth']));
                totalArr.push(totalArr[totalArr.length-1]+parseFloat(data['unVisit']));
                dataArr.push(parseFloat(data['lessOneMonth']));
                dataArr.push(parseFloat(data['lessThreeMonth']));
                dataArr.push(parseFloat(data['lessSixMonth']));
                dataArr.push(parseFloat(data['lessTwelveMonth']));
                dataArr.push(parseFloat(data['greaterTwelveMonth']));
                dataArr.push(parseFloat(data['unVisit']));
                let option = {
                  tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                      type: 'shadow'
                    },
                    formatter: function (params) {
                      let tar;
                      if (params[1].value !== '-') {
                        tar = params[1];
                      } else {
                        tar = params[0];
                      }
                      return tar.name +  ' : ' + tar.value;
                    }
                  },
                  grid: {
                    top:'0%',
                    left: '0%',
                    right: '0%',
                    bottom: '0%',
                    containLabel: true
                  },
                  xAxis: [{
                    type: 'category',
                    axisLine:{
                        show:false
                    },
                    axisTick:{
                        show:false
                    },
                    axisLabel:{
                      rotate:30,
                      fontSize:12
                    },
                    hideOverlap:false,
                    data: (function () {
                      let list = ['0~1个月','1~3个月','3~6个月','6~12个月','12个月以上','未互动'];
                      return list;
                    })()
                  },{
                    type: 'category',
                    axisLine:{
                        show:false
                    },
                    axisTick:{
                        show:false
                    },
                    show:false,
                    data: (function () {
                      let list = ['0~1个月','1~3个月','3~6个月','6~12个月','12个月以上','未互动'];
                      return list;
                    })()
                  }],
                  yAxis: {
                    type: 'value',
                    splitLine:{
                        show:false
                    },
                    show:false
                  },
                  series: [
                    {
                      name: '总数',
                      type: 'bar',
                      stack: 'Total',
                      itemStyle: {
                        borderColor: 'transparent',
                        color: 'transparent'
                      },
                      emphasis: {
                        itemStyle: {
                          borderColor: 'transparent',
                          color: 'transparent'
                        }
                      },
                      data: totalArr
                    },
                    {
                      name: '周期分布',
                      type: 'bar',
                      stack: 'Total',
                      itemStyle: {
                        color: '#fb9b99'
                      },
                      barWidth:20,
                      label: {
                        show: true,
                        formatter:function(value){
                          let val = parseFloat((value.value/totalArr[totalArr.length-1]) * 100).toFixed(2)+'%';
                          if(val == '0.00%'){
                            val = 0;
                          }
                          return val
                        },
                        position: 'top'
                      },
                      data: dataArr
                    },
                    // {
                    //   name: '总数柱状图',
                    //   type: 'bar',
                    //   itemStyle: {
                    //     color: '#fb9b99'
                    //   },
                    //   xAxisIndex:1,
                    //   barWidth:20,
                    //   label: {
                    //     show: true,
                    //     formatter:function(value){
                    //       return value.value?'100%':''
                    //     },
                    //     position: 'top'
                    //   },
                    //   data: [0,0,0,0,0,0,totalArr[totalArr.length-1]]
                    // }
                  ]
                };
                myChart.setOption(option);
            },
            compareValues(key, order = 'asc') {
              return function innerSort(a, b) {
                if (!a.hasOwnProperty(key) || !b.hasOwnProperty(key)) {
                  // 该属性在其中一个对象上不存在
                  return 0;
                }

                const varA = (typeof a[key] === 'string')
                  ? a[key].toUpperCase() : a[key];
                const varB = (typeof b[key] === 'string')
                  ? b[key].toUpperCase() : b[key];

                let comparison = 0;
                if (varA > varB) {
                  comparison = 1;
                } else if (varA < varB) {
                  comparison = -1;
                }
                return (
                  (order === 'desc') ? (comparison * -1) : comparison
                );
              };
            },
            getParkCompany(){
                this.maxNum = 0;
                this.parkPageNo = 1;
                this.$http.postAction('/companyInfo/report/getCountGroupPark').then(res=>{
                    if(res.status == 1){
                        this.parkDataAll = res.data;
                        this.parkDataAll.map(e=>{
                            e.companyNum = parseFloat(e.companyNum);
                        })
                        this.total = this.parkDataAll.length
                        this.parkDataAll = this.parkDataAll.sort(this.compareValues('companyNum','desc'))
                        this.maxNum = this.parkDataAll.length>0?this.parkDataAll[0].companyNum:0;
                        this.splitPage();
                    }
                })
            },
            onChange(current) {
              this.parkPageNo = current;
              this.splitPage();
            },
            splitPage(){
                this.parkData = this.parkDataAll.filter((e,index)=>{
                    return (this.parkPageNo-1)*10<=index && index < this.parkPageNo*10
                })
            },
            switchSortType(){
                if(this.sortType == 'desc'){
                    this.sortType = 'asc';
                    this.parkDataAll = this.parkDataAll.sort(this.compareValues('companyNum','asc'))
                }else{
                    this.sortType = 'desc';
                    this.parkDataAll = this.parkDataAll.sort(this.compareValues('companyNum','desc'))
                }
                this.splitPage();
            },
        }
    }
</script>

<style scoped>
*{
    list-style-type:none;
    margin:0px;
}
    .page-header-index-wide{
        background: #f2f4f5;
        height: calc(100vh - 141px);
        color: #333333;
        overflow-y: auto;
        padding:0px 20px 0px 20px;
    }
    .colDiv{
        padding-top: 10px;
    }
    .colDiv h5{
        line-height: 40px;
        margin-bottom:10px;
        padding-left: 5px;
        font-size:16px;
    }
    .legend{
        display: flex;
        justify-content: space-around;
    }
    .blueB{
        background-color: #1f78b4;
    }
    .redB{
        background-color: #fb9b99;
    }
    .barB{
        background-color: #1f78b4;
    }
    .barR{
        background-color: #fb9b99;
    }
    .legend >div b{
        display: inline-block;
        width:30px;
        height: 15px;
        float: left;
        margin-top: 2px;
        margin-right: 5px;
    }
    .sortIcon{
        width: 20px;
        cursor: pointer;
    }
    .yqList{
        padding-top:20px;
    }
    .yqList li{
        height:30px;
        line-height: 30px;
        clear: both
    }
    .yqList li .parkName{
        display: inline-block;
        text-align: right;
        width:162px;
        float: left;
        margin-right: 10px;
    }
    .yqList li >div{
        display: inline-block;
        float: left;
        margin-right: 10px;
    }
    .yqList li .bar span{
        height:20px;
        display: inline-block;
        margin-top:5px;
    }
    #echarts{
        width:390px;
        height:calc(52vh - 100px);
    }
</style>
<style>
    .colDiv .ant-pagination{
        position: absolute;
        right: 0px;
        bottom: 20px;
    }
    .tableFoot .ant-pagination{
        bottom: 95px;
    }
    .colDiv .ant-spin-nested-loading{
        position: unset;
    }
    .colDiv .ant-spin-container{
        position: unset;
    }
    .colDiv .ant-table-pagination.ant-pagination{
        margin:0px;
    }
    .colDiv .table-page-search-wrapper .ant-col{
        margin-bottom:20px;
        height:32px;
    }
    .colDiv .ant-select-selection--multiple{
      height: 32px;
      overflow-y: auto !important;
    }
</style>